<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-menu-item
        :index="index + ''"
        v-for="(item, index) in data.tableData"
        :key="index + ''"
        @click="show(item.data)"
    >{{ item.month }}
    </el-menu-item
    >
  </el-menu>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="Date" prop="date"/>
    <el-table-column label="HTML" prop="html"/>
    <el-table-column label="CSS" prop="css"/>
    <el-table-column label="JS" prop="js"/>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search"/>
      </template>
      <template #default="scope">
        <el-button size="small" 
        >上传
        </el-button
        >
        <el-button
            size="small"
            type="danger"
           
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div ref="main" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">
import {computed, inject, reactive, ref,onMounted} from "vue";
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
const main = ref();
const http: any = inject("$http");

let activeIndex = ref("1");
let search: any = ref("");
let data: any = reactive({
  tableData: {},
  showData: [
    {
      date: 1,
      html: 6,
      css: 53,
      js: 84,
    },
    {
      date: 2,
      html: 90,
      css: 71,
      js: 95,
    },
    {
      date: 3,
      html: 45,
      css: 90,
      js: 74,
    },
    {
      date: 4,
      html: 60,
      css: 8,
      js: 28,
    },
    {
      date: 5,
      html: 75,
      css: 3,
      js: 5,
    },
    {
      date: 6,
      html: 46,
      css: 71,
      js: 69,
    },
    {
      date: 7,
      html: 87,
      css: 10,
      js: 37,
    },
    {
      date: 8,
      html: 13,
      css: 22,
      js: 44,
    },
    {
      date: 9,
      html: 53,
      css: 19,
      js: 53,
    },
    {
      date: 10,
      html: 58,
      css: 97,
      js: 20,
    },
    {
      date: 11,
      html: 91,
      css: 13,
      js: 33,
    },
    {
      date: 12,
      html: 55,
      css: 43,
      js: 14,
    },
    {
      date: 13,
      html: 78,
      css: 94,
      js: 96,
    },
    {
      date: 14,
      html: 88,
      css: 41,
      js: 17,
    },
    {
      date: 15,
      html: 7,
      css: 72,
      js: 20,
    },
    {
      date: 16,
      html: 33,
      css: 63,
      js: 85,
    },
    {
      date: 17,
      html: 33,
      css: 56,
      js: 87,
    },
    {
      date: 18,
      html: 18,
      css: 96,
      js: 42,
    },
    {
      date: 19,
      html: 49,
      css: 13,
      js: 58,
    },
    {
      date: 20,
      html: 43,
      css: 55,
      js: 70,
    },
    {
      date: 21,
      html: 52,
      css: 54,
      js: 89,
    },
    {
      date: 22,
      html: 80,
      css: 8,
      js: 61,
    },
    {
      date: 23,
      html: 91,
      css: 72,
      js: 73,
    },
    {
      date: 24,
      html: 73,
      css: 96,
      js: 18,
    },
    {
      date: 25,
      html: 88,
      css: 87,
      js: 57,
    },
    {
      date: 26,
      html: 33,
      css: 94,
      js: 99,
    },
    {
      date: 27,
      html: 78,
      css: 31,
      js: 65,
    },
    {
      date: 28,
      html: 62,
      css: 21,
      js: 27,
    },
    {
      date: 29,
      html: 94,
      css: 70,
      js: 63,
    },
    {
      date: 30,
      html: 85,
      css: 47,
      js: 19,
    },
  ],
});
// console.log(http)
http.get("/yearsList").then((res: any) => {
  data.tableData = reactive(res.data.data.tableData);
});

let show = (item: any) => {
  data.showData = item;
  init(item)
};

let filterTableData = computed(() => {
  return data.showData.filter((data: any) => {
    if (!search.value) {
      return !search.value;
    } else {
      return data.date + "" === search.value;
    }
  });
});
onMounted(
  () => {
    let list:any =data.showData
    init(list)
  }
)
function init(list:any) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  
  let xA = computed(() => {
    return data.showData.map((item: any) => {
      return item.date.toString()
    });
  });
  let series1 = computed(() => {
    return data.showData.map((item: any) => {
      return item.html.toString()
    });
  });
  // let series2 = computed(() => {
  //   return data.showData.map((item: any) => {
  //     return item.css.toString()
  //   });
  // });
  // let series3 = computed(() => {
  //   return data.showData.map((item: any) => {
  //     return item.js.toString()
  //   });
  // });

  var option = {
    title: {
      text: '每月听写成绩展示'
    },
    tooltip: {},
    legend: {
      // data: ['html','css','js']
      data: ['html']
    },
    xAxis: {
      data:xA.value
    },
    yAxis: {},
    series: [
      {
        data: series1.value,
        type: 'line',
        name: 'html'
      },
      // {
      //   data: series2.value,
      //   type: 'line',
      //   name: 'css'
      // },
      // {
      //   data: series3.value,
      //   type: 'line',
      //   name: 'js'
      // }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

</script>

<style scoped>
</style>